<template>


  <div>
    <Vlogin></Vlogin>

    <div class="container">
      <h1 class="text-center">资源分享</h1>
      <div class="form-inline" v-if="this.$store.state.token">
        <label for="title">资源名称</label>
        <input type="text" class="form-control" id="title" placeholder="请输入资源名称" v-model="title" v-focus>
        <label for="tag">标签</label>
        <select class="form-control" id="tag" v-model="tag">
          <option value="" disabled>请选择标签</option>
          <option :value="item.id" v-for="item in this.$store.state.tagList">{{item.tag}}</option>
        </select>
        <label for="url">下载地址</label>
        <input type="text" class="form-control" id="url" placeholder="请输入下载地址"
               v-model="url">
        <label for="remark">备注</label>
        <input type="text" class="form-control" id="remark" placeholder="例如分享密码" v-model="remark">
        <input type="button" class="btn btn-primary pull-right" value="添加" @click="add">
      </div>









      <!--<el-form :inline="true"  ref="form" class="demo-form-inline" v-if="this.$store.state.token">-->
        <!--<el-form-item label="资源名称" size="small">-->
          <!--<el-input placeholder="资源名称" v-model="title"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="标签" size="small" >-->
           <!--<el-col :span="12">-->
            <!--<el-select v-model="tag">-->
              <!--<el-option  :value="item.id" :key="item.id" v-for="item in this.$store.state.tagList" :label="item.tag" ></el-option>-->
            <!--</el-select>-->
           <!--</el-col>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="下载地址" size="small">-->
          <!--<el-input placeholder="下载地址" v-model="url"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
          <!--<el-button type="primary" @click="add" round size="small">添加</el-button>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="备注" size="small">-->
          <!--<el-input placeholder="如百度网盘的密码" v-model="remark"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-form>-->


















      <hr>
      <div class="pull-right">
        <button class="btn btn-default" @click="resetDateFilter">清除日期过滤器</button>
        <button class="btn btn-default" @click="clearFilter">清除所有过滤器</button>

      </div>















      <el-table
        ref="filterTable"
        :data="this.$store.state.resourceData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          sortable
          column-key="date"
          :filters="this.$store.state.dateList"
          :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column prop="user" label="贡献者">
          <template slot-scope="user">
            <p>{{user.row.user.nickname}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="资源名称"
        >

        </el-table-column>

        <el-table-column
          prop="url"
          label="下载地址"
          v-if="this.$store.state.token">
          <template slot-scope="url">
            <a :href='url.row.url'>前往下载</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          v-if="this.$store.state.token">
        </el-table-column>

        <!--<el-table-column-->
        <!--prop="score"-->
        <!--label="评分"-->
        <!--width="150">-->
        <!--<template slot-scope="scope">-->
        <!--&lt;!&ndash;<Vscore :score="scope.row.score"></Vscore>&ndash;&gt;-->
        <!--<i @click="up(scope.row.id)" class="fa fa-thumbs-o-up fa-2x" aria-hidden="true"><span class="badge">{{scope.row.up}}</span></i>&nbsp-->
        <!--<i @click="down(scope.row.id)" class="fa fa-thumbs-o-down fa-2x" aria-hidden="true"><span class="badge">{{scope.row.down}}</span></i>-->

        <!--</template>-->

        <!--</el-table-column>-->

        <el-table-column
          prop="tag"
          label="标签"
          width="100"
          :filters="this.$store.state.filterTags"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="tag">
            <el-tag
              :type="tag.row.tag === 'Python' ? 'primary' : 'success'"
              disable-transitions>{{tag.row.tag}}
            </el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="tag"-->
        <!--label="标签"-->
        <!--width="100"-->
        <!--:filters="tagList"-->
        <!--:filter-method="filterTag"-->
        <!--filter-placement="bottom-end">-->
        <el-table-column
          label="操作"
          :formatter="formatter" v-if="$store.state.token"  >
          <template slot-scope="options" >
            <Voptions :resource_id="options.row.id"   v-if="showState(options.row.user.id)"></Voptions>
          </template>
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>

<script>
  import Vscore from '@/components/Vscore'
  import Vlogin from '@/components/Vlogin'
  import Vadd from '@/components/Vadd'
  import Voptions from '@/components/Voptions'

  export default {

    name: "Vtest",
    data() {
      return {

        title: null,
        tag: '',
        url: null,
        remark: null,

        show:false
      }
    },


    mounted: function () {
      this.getResourceData();
      this.getTagList();


    },
    methods: {
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.url;
      },

      score(value, row) {
        return row.score === score;
      },


      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      getResourceData: function () {
        this.$store.commit("getResourceData");
      },


      getTagList: function () {
        this.$store.commit("getTagList");
      },
      add: function () {
        // this.$store.commit("addResource");
        this.$axios.request({
          url: this.$store.state.ip + "resource/",
          method: "Post",
          data: {
            title: this.title,
            tag: this.tag,
            url: this.url,
            remark: this.remark,
            user: Number(this.$store.state.user_id)
          },
          params:{
            token:this.$store.state.token
          }
        }).then((data) => {
          alert(data.data.msg)
          this.$store.state.resourceData.unshift(data.data.resource)
        }).catch((error) => {
          alert("error")
        })
      },

      // 删除、修改按钮权限控制按钮 方法1
      // showState:function(resource_userid){
      //   var user_id=Number(this.$store.state.user_id);
      //   if(resource_userid===user_id){
      //     return true
      //   }else {
      //     return false
      //   }
      // }

    },
    computed: {
      // 删除、修改按钮权限控制按钮 方法1   利用函数的闭包
      showState:function () {
        return function (resource_userid) {
          var user_id=Number(this.$store.state.user_id);
          if(resource_userid===user_id){
            return true
          }else {
            return false
          }
          // console.log(id)
        }
      }
    },
    components: {
      Vscore,
      Vlogin,
      Vadd,
      Voptions,

    }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }



</style>
